<template>
	<view class="wpprs">
		<image src="../../static/bactop.png" mode="" class="bactop"></image>
		<view class="boxs">
			<view class="lines">
				<view class="mylabel">手机号</view>
				<input class="tovalue" maxlength="11" v-model="phone" type="text" placeholder="请输入手机号" />
			</view>
			<view class="lines">
				<view class="mylabel">验证码</view>
				<input class="tovalue" maxlength="6" v-model="verificationCode" type="text" placeholder="请输入验证码" />
				<view class="btn" @click="getcode">{{ timer < 1 ? '获取验证码' : `${timer}重新获取` }}</view>
			</view>
			<view class="lines">
				<view class="mylabel">新密码</view>
				<input class="tovalue" v-model="newPassword" type="password" placeholder="请输入新密码" />
			</view>
			<view class="lines upx">
				<view class="mylabel">确认密码</view>
				<input class="tovalue" v-model="confirmPassword" type="password" placeholder="请确认密码" />
			</view>
		</view>
		<view class="submiit" @click="submiit">确定</view>
	</view>
</template>

<script>
import { handleGetCode, retrievePwd } from '../../api/login';

export default {
	data() {
		return {
			phone: '',
			verificationCode: '',
			newPassword: '',
			confirmPassword: '',
			timerfunc: null,
			timer: 0
		};
	},
	methods: {
		submiit() {
			if (this.phone.length != 11) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (this.verificationCode.length != 6) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (this.newPassword.length < 8) {
				uni.showToast({
					title: '密码长度不能小于8',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			if (this.newPassword != this.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致！',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			retrievePwd({
				phone: this.phone,
				verifyCode: this.verificationCode,
				newPassword: this.newPassword,
				confirmPassword: this.confirmPassword
			}).then((data) => {
				uni.redirectTo({
					url: '/pages/login/login'
				});
			});
		},
		getcode() {
			if (this.phone.length != 11) {
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			if (this.timer > 0) {
				return;
			}
			handleGetCode({
				phone: this.phone
			}).then((data) => {
				uni.showToast({
					title: '验证码已发送',
					icon: 'none',
					duration: 2000
				});
				this.timer = 60;
				this.timerfunc = setInterval((_) => {
					this.timer = this.timer - 1;
					console.log('this.timer', this.timer);
					if (this.timer < 1) {
						clearInterval(this.timerfunc);
					}
				}, 1000);
			});
		}
	}
};
</script>

<style lang="less" scoped>
.wpprs {
	padding: 60upx 30upx;
}

.bactop {
	width: 100%;
	height: 600upx;
	position: fixed;
	top: 0;
	left: 0;
}
.submiit {
	position: relative;
	z-index: 2;
	background: linear-gradient(135deg, #f1564b 0%, #dd1405 100%);
	box-shadow: 0px 12px 12px 0px rgba(221, 20, 5, 0.15);
	border-radius: 48upx;
	padding: 22upx;
	color: #fff;
	text-align: center;
	margin-top: 60upx;
}
.boxs {
	background-color: #fff;
	border-radius: 20upx;
	position: relative;
	z-index: 2;
	padding: 0 30upx;
	box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.05);
	.lines {
		display: flex;
		padding: 40upx 0;
		font-size: 28upx;
		border-bottom: 1px rgba(0, 0, 0, 0.05) solid;
		.mylabel {
			color: #333333;
			display: inline-block;
			width: 240upx;
			font-weight: 500;
		}
		input {
			font-size: 28upx;
		}
		.btn {
			width: 172upx;
			color: #dd1405;
			font-weight: 500;
			position: relative;
			z-index: 99;
		}
		&.upx {
			border: none;
		}
	}
}
</style>
